<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <p><input type="text" v-model="msg" ></p>
        <myhead></myhead>
        <hr>
        <parent></parent>
    </div>

    <template id="parent">
        <div>
            <h2>parent  - parent - 父组件 </h2>
            <p> word --- {{word}}</p>
            <p> count --- {{count}}</p>
            <div  :style="{width:'200px',height:'200px',color:'#fff',background:'purple',display:show?'block':'none'}" >
                我被子组件控制....
            </div>
            <p>
                <input type="text" v-model="txt" >
            </p>
            <hr>
            <childone 
                :word="word"
                @clickabc123weqweqwqewdassaddsjkdaslljkadsjdas="getNewWord"
                @changeparentcount="changecount"
                :changeshow="changeshow"
                :changetext="changetext"
            >

            </childone>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2>childone  - childone - 1 - 子组件 </h2>
            <p>
                <input :value="word" type="text" @input="changepword">
            </p>
            <p>
                <button @click="changepcount"> 修改父组件的 count </button>
                <button @click="changebyparent"> $parent 修改父组件的 count </button>
                <button @click="changeshow"> 反向 修改父组件的 show </button>
                <button @click="changetext('每天熬夜到2点...')"> 反向 修改父组件的 txt   </button>

            </p>
        </div>
    </template>

    <script>
        Vue.component("myhead",{
            template:"<header>wh2107 - 天道酬勤 </header>"
        })
        
        Vue.component('parent',{
            template:"#parent",
            data(){
                return {
                    word:"每天把代码练习写完就够了...",
                    count:2107,
                    show:true ,
                    txt:"2107-一定要精通Vue.js"
                }
            },
            methods:{
                changetext(arg){
                    this.txt = arg;
                },
                changeshow(){
                    this.show = !this.show ; 
                },
                getNewWord(data){
                    console.log(data)
                    this.word = data;
                },
                changecount(n){
                    this.count += n; 
                }
            }
        })
        Vue.component("childone",{
            template:"#childone",
            props:{
                word:String,
                changeshow:Function , 
                changetext:Function 
            },
            methods:{
                changepword(e){
                    // 子发送
                    this.$emit("clickabc123weqweqwqewdassaddsjkdaslljkadsjdas",e.target.value )
                },
                changepcount(){
                    this.$emit("changeparentcount",100)
                },
                changebyparent(){
                    // this.$parent 当前的父实例对象 
                    // this.$parent.count++;
                    // this.$parent.changecount(2000);
                    this.$parent.word = "Are you oK???"
                }
            }
        })

        const vm = new Vue({
            // el:"#app",
            data:{
                msg:"父子组件通信 - 子组件去修改父组件  ",
                flag:true 
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.msg 
            }
        }).$mount("#app")
    </script>

    <!-- 
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        Emit  发送
        On    监听 
        Once  只触发一次  


        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）


        2. 子组件访问父组件
        a.  自定义事件   emit  子组件发送事件    on 父组件监听事件 修改内部变量   
        b.  $parent     父实例，如果当前实例有的话  父组件  
        c.  逆向props   父组件 把修改自身变量的方法函数通过props 传递给子组件 子组件执行这个props函数  实现子改父 
        d.  事件中央总线   
        e.  vuex   
        
        3.  兄弟组件之间的通信  


        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数 
     -->
</body>
</html>